<template>
  <span>{{ name }}</span>
  <div class="box">
    <span>{{ str }}</span>
  </div>
</template>

<script setup lang="ts">
// 引入vue3响应式函数
import { ref } from "vue";
//引入响应式函数
import { storeToRefs } from "pinia";
//引入pinia根文件
import useStore from "@/store";
//通过结构赋值的方法取出仓库
const { counter, user } = useStore();
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { name } = storeToRefs(counter);
console.log(name.value);
let str = ref();
async function gets() {
  let data = await user.getText();
  str.value = data;
}
gets();
// console.log(import.meta.env.VITE_APP_URL)
</script>

<style scoped lang="scss">
.box {
  color: red;
  font-size: 30px;
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>
